<template>
	<view>
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balance">提现记录</text>
				<!-- 右边自定义图片 -->
				<image src="/static/user2/rili.png" style="width: 31rpx;height: 26rpx;position: absolute;right:65rpx;"></image>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;">
		</view>
		
		<view class="headbox">
			<text class="frame"></text>
			<text class="year">{{year}}</text>
		</view>
		<view class="main">
			<view class="withdrawalBox" v-for="(item,index) in recordData" :key="index">
				<text class="wxtx">{{item.wxtx}}</text>
				<image class="timeIcon" src="../../../static/dating/number.png"></image>
				<text class="month">{{item.month}}</text>
				<text class="time">{{item.time}}</text>
				<image class="orderIcon" src="../../../static/dating/number.png"></image>
				<text class="ordernum">{{item.ordernum}}</text>
				<text class="money">+{{item.money}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year:'2020年4月20日',
				recordData:[{
					wxtx:'订单完成',
					month:'2020-04-20',
					time:'12:30',
					ordernum:'202003200001',
					money:'800',
				},{
					wxtx:'订单完成',
					month:'2020-04-20',
					time:'12:30',
					ordernum:'202003200001',
					money:'800',
				},{
					wxtx:'订单完成',
					month:'2020-04-20',
					time:'12:30',
					ordernum:'202003200001',
					money:'800',
				},{
					wxtx:'订单完成',
					month:'2020-04-20',
					time:'12:30',
					ordernum:'202003200001',
					money:'800',
				},{
					wxtx:'订单完成',
					month:'2020-04-20',
					time:'12:30',
					ordernum:'202003200001',
					money:'800',
				},{
					wxtx:'订单完成',
					month:'2020-04-20',
					time:'12:30',
					ordernum:'202003200001',
					money:'800',
				}]
			};
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1,
				})
				}
			}
	}
</script>

<style lang="scss">
   .riliIcon{
	   width:31rpx;
	   height:26rpx;
	   position: absolute;
	   right: 35rpx;
	   top: 37rpx;
	   }
	  .headbox{
		  width: 750rpx;
		  height: 90rpx;
		  display: flex;
		  align-items: center;
	  }
	  .frame{
		  display: block;
		  width:10rpx;
		  height:30rpx;
		  background:rgba(115,34,216,1);
		  border-radius:5rpx;
		  position: absolute;
		  left: 20rpx;
	  }
	  .year{
		  font-size:28rpx;
		  font-family:PingFang SC;
		  font-weight:400;
		  color:rgba(51,51,51,1);
		  position: absolute;
		  left: 42rpx;	
	  }
	  .main{
		  width: 750rpx;
		  background: white;
	  }
	  .withdrawalBox{
		  width: 680rpx;
		  height: 110rpx;
		  border-bottom: 1rpx solid #E5E5E5;
		  position: relative;
		  left: 35rpx;
		  margin-top: 20rpx;
	  }
	  .wxtx{
		  font-size:30rpx;
		  font-family:PingFang SC;
		  font-weight:400;
		  color:rgba(51,51,51,1);
		  position: absolute;
		  left: 0rpx;
		  top: 10rpx;
	  }
	  .timeIcon{
		  width: 22rpx;
		  height: 22rpx;
		  position: absolute;
		  left:0rpx;
		  top: 70rpx;
		  }
	  .month{
		  font-size:24rpx;
		  font-family:PingFang SC;
		  font-weight:400;
		  color:rgba(142,142,142,1);
		  position: absolute;
		  left:40rpx;
		  top: 65rpx;
	  }
	  .time{
		  font-size:24rpx;
		  font-family:PingFang SC;
		  font-weight:400;
		  color:rgba(142,142,142,1);
		  position: absolute;
		  left: 195rpx;
		  top: 65rpx;
	  }
	  .orderIcon{
		  width: 27rpx;
		  height: 20rpx;
		  position: absolute;
		  top: 70rpx;
		  left: 280rpx;
		  }
		  .ordernum{
			  font-size:24rpx;
			  font-family:PingFang SC;
			  font-weight:400;
			  color:rgba(142,142,142,1);
			  position: absolute;
			  top: 65rpx;
			  left: 320rpx;
			  }
	  .money{
		  font-size:28rpx;
		  font-family:PingFang SC;
		  font-weight:400;
		  color:#FF3B30;
		  position: absolute;
		  right: 0rpx;
		  top: 40rpx;
	  }
</style>
